<template>
  <div>
    <div class="app-avue-form">
      <h1>avue-form</h1>
      <avue-form :option="option" v-model="form">
        <template #sex>
          <h1>分组表单（在avue-form插槽中）</h1>
          <div class="hello-word">
            <HelloWord></HelloWord>
          </div>
        </template>
      </avue-form>
    </div>
    <h1>分组表单（在avue-form插槽外）</h1>
    <div class="hello-word">
      <HelloWord></HelloWord>
    </div>
  </div>
</template>
<script>
import HelloWord from './components/HelloWorld.vue'
export default {
  components: {
    HelloWord
  },
  data () {
    return {
      form: {},
      option: {
        column: [
          {
            label: '姓名',
            prop: 'name',
            value: 'small',
            span: 24
          },
          {
            label: '性别',
            prop: 'sex',
            span: 24
          }
        ]
      }
    }
  }
}
</script>
<style>
body {
  padding: 50px;
}
.app-avue-form {
  border: 2px solid blue;
  margin-bottom: 20px;
}
.hello-word {
  border: 2px solid red;
}
</style>
